<!-- 链接弹层 -->
<template>
  <div class="modal-wrapper form-limit" v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth">
      <el-form-item prop="name" label="连接名">
        <el-input v-model="form.name" placeholder="请输入" clearable :disabled="isEdit" />
      </el-form-item>
      <el-form-item prop="host" label="主机名或IP地址">
        <el-input v-model="form.host" placeholder="请输入" clearable :disabled="isEdit" />
      </el-form-item>
      <el-form-item prop="port" label="端口">
        <el-input v-model="form.port" placeholder="请输入" clearable :disabled="isEdit" />
      </el-form-item>
      <el-form-item prop="platform" label="数据库类型">
        <el-select v-model="form.platform" placeholder="请选择" clearable :disabled="isEdit">
          <el-option
            v-for="(item, index) in platformList"
            :key="index"
            :value="item.id"
            :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="db" label="数据库名">
        <el-input v-model="form.db" placeholder="请输入" clearable :disabled="isEdit" />
      </el-form-item>
      <el-form-item prop="user" label="用户名">
        <el-input v-model="form.user" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input type="password" v-model="form.password" placeholder="请输入" clearable />
      </el-form-item>
    </el-form>
    <div class="dialog-footer form-btn-row">
      <mine-button @click="cancel" type="primary" secondary>取 消</mine-button>
      <mine-button type="primary" @click="save">确 认</mine-button>
    </div>
  </div>
</template>
<script>
import { mappingMixins } from '../mixins';
import { omit } from 'lodash';
import { encode } from 'js-base64';
export default {
  mixins: [mappingMixins],
  props: {
    info: {
      type: Object,
      default: function () {
        return {};
      }
    },
    isEdit: Boolean,
  },
  data () {
    return {
      loading: false,
      saveLoading: false,
      labelWidth: '120px',
      form: {
        name: '',
        host: '',
        port: '',
        platform: '',
        db: '',
        user: '',
        password: '',
      },
      form1: {
        name: '测试',
        host: '10.133.106.109',
        port: '3306',
        platform: 'mysql',
        db: 'eva_image_new',
        user: 'root',
        password: 'RHBhaTEyMzQ1Ng==', // 加密后
        password1: 'Dpai123456'
      },
      rules: {
        name: { required: true, message: '请输入连接名', trigger: 'blur' },
        host: { required: true, message: '请输入主机名或IP地址', trigger: 'blur' },
        port: { required: true, message: '请输入端口', trigger: 'blur' },
        platform: { required: true, message: '请选择数据库类型', trigger: 'change' },
        db: { required: true, message: '请输入数据库名', trigger: 'blur' },
        user: { required: true, message: '请输入用户名', trigger: 'blur' },
        password: { required: true, message: '请输入密码', trigger: 'blur' },
      }
    }
  },
  methods: {
    show () {
      this.$refs.form.resetFields();
      if (this.isEdit) {
        this.form = omit({ ...this.info }, ['password']);
      }
    },
    async save () {
      if (!this.$common.doSubmit('form', this)) return;
      if (this.isEdit) {
        // 编辑
        const params = {
          id: this.form.id || '',
          password: this.form.password ? encode(this.form.password) : '',
          user: this.form.user || '',
        };
        this.loading = true;
        try {
          const res = await this.$store.dispatch('dataAdminDatabaseinfoUpdateDataBase', params);
          const result = res.data || {};
          if (result.success) {
            this.$message({ type: 'success', message: '保存成功' });
            this.$emit('submit');
            this.$emit('close');
          } else {
            this.$message({ type: 'error', message: result.msg || '保存失败' });
          }
        } catch (e) {
          console.error(e);
        }
        this.loading = false;
      } else {
        // 新增
        const params = {
          ...this.form,
        };
        // 前端加密
        params.password = encode(params.password);
        this.loading = true;
        try {
          const res = await this.$store.dispatch('dataAdminDatabaseinfoInsertDataBase', params);
          const result = res.data || {};
          if (result.success) {
            this.$message({ type: 'success', message: '新增成功' });
            this.$emit('submit');
            this.$emit('close');
          } else {
            this.$message({ type: 'error', message: result.msg || '新增失败' });
          }
        } catch (e) {
          console.error(e);
        }
        this.loading = false;
      }
    },
    cancel () {
      this.$emit('close');
    }
  }
}
</script>
